<template>
  <div class="shop">
    <div>
      <van-swipe-cell v-for="item in arr" :key="item.id">
        <van-checkbox v-model="item.checked" shape="square" class="checkbox" @change="changeOne"></van-checkbox>
        <div class="button">
          <van-button @touchstart.stop="sub(item.id, item.num)">-</van-button>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="span">{{ item.num }}</span>
          <van-button @touchstart.stop="add(item.id)">+</van-button>
        </div>
        <van-card
          :price="item.price*item.num"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$pre + item.img"
        />
        <template #right>
          <van-button @touchstart.stop="del(item.id)" square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <div v-if="arr.length == 0">
      <van-empty description="暂无数据" />
    </div>
    <!-- 提交栏  -->
    <van-submit-bar
      :price="allPrice * 100"
      button-text="提交订单"
      safe-area-inset-bottom
      @submit="onSubmit"
    >
      <van-checkbox v-model="allChecked" @click="changeAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant"
import { reqGetShop, reqShopDel, reqShopEdit } from "../../http/api"
export default {
  data() {
    return {
      arr: [],
      checked: false,
      isRequest: true,
      allChecked:false,//全选
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      reqGetShop({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
      }).then((res) => {
        if(res.data.code==200){
          this.isRequest = true;
          var arr = res.data.list?res.data.list:[];
          arr.forEach((item)=>{
            let obj = this.arr.find((i)=>i.id==item.id);
            item.checked = obj?obj.checked:false
          });
          this.arr = arr
          this.allChecked = this.arr.length == 0 ?false:this.arr.every((item)=>item.checked)
        }
      })
    },
    //删除
    del(id) {
      Dialog.confirm({
        title: "删除提示",
        message: "你确定要删除吗"
      }).then(() => {
        // console.log(id);
        reqShopDel({
          id: id,
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            Toast(res.data.msg)
            this.getList()
          }
        })

      })
        .catch(() => { 
          console.log("取消");
        });
    },
    //点了+
    add(id) {
      reqShopEdit({
        id: id,
        type: 2,
      }).then((res) => {
        if (res.data.code == 200) {
          this.getList()
        }
      })
    },
    //点了-
    sub(id, num) {
      if (this.isRequest) {
        if (num <= 1) {
          Toast("宝贝不能再少啦！")
          return;
        }
        this.isRequest = false;
        reqShopEdit({
          id: id,
          type: 1
        }).then((res) => {
          if (res.data.code == 200) {
            this.getList();

          }
        })
      }
    },
    //全选
    changeAll(){
      this.arr.forEach((item) => {
        item.checked = this.allChecked
      });
    },
    //点了某一个
    changeOne(){
      this.allChecked = this.arr.every((item)=>item.checked)
    },
    //提交订单
    onSubmit(){
      let json = {
        countmoney:this.allPrice,
         countnumber: this.arr.reduce(
          (val, item) => (item.checked ? val + item.num : val),
          0
        ),
        idstr:this.arr.reduce((val,item)=>item.checked?val+','+item.id:val,'').slice(1)
      };
      sessionStorage.setItem("orderInfo",JSON.stringify(json))
      if(json.countmoney){
        this.$router.push("/order")
      }else{
        Toast("请先购买")
      }
    }
  },
  computed: {
    allPrice(){
      return this.arr.reduce((val,item)=>(item.checked?val+item.price*item.num:val),0)
    }
  }
}
</script>

<style scoped lang="less">
@import url(../../less/index.less);
.goods-card {
  margin: 0;
  background-color: @white;
}

.delete-button {
  height: 100%;
}
.van-card__content {
  justify-content: space-around;
  .van-card__title {
    font-size: 0.35rem;
  }
}
.van-swipe-cell__wrapper {
  position: relative;
}
.checkbox {
  position: absolute;
  z-index: 1;
  top: 0.7rem;
  left: 0.25rem;
}
.goods-card {
  margin-left: 0.6rem;
}
.shop {
  margin-top: 0.82rem;
}

.button {
  position: absolute;
  z-index: 1;
  left: 5.3rem;
  top: 0.7rem;
  .span {
    font-size: 0.3rem;
    display: inline-block;
    text-align: center;
    width: 0.5rem;
    background-color: #ccc;
    position: absolute;
    top: 0.2rem;
    left: 0.7rem;
    z-index: 1;
  }
  button {
    width: 0.65rem;
    height: 0.5rem;
    border: none;
    span {
      font-size: 0.6rem;
    }
  }
}
.van-submit-bar {
  bottom: calc(@footerHeight + 0.01rem);
  .van-button__text{
    font-size: 0.35rem;
  }
}
</style>